<template>
	<view>
		<nav-custom></nav-custom>
		<!-- 数据为空 -->
		<u-empty v-if="isEmpty" icon="https://static.mcake.com/goods/daixidelvxing/R1802/middle/2.jpg"></u-empty>
		<view class="cont">
			<good-item v-for="(item,index) in glist" :key="index" :gdata="item"></good-item>
		</view>
		<view class="fixed flex justify-center bg-fff padding-sm">
			<view v-for="(item,index) in tabArr" :key="index" @click="handleTab(item)" class="flex justify-center align-center pad">
				<view class="">{{item.name}}</view>
				<u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="20upx"></u-line>
			</view>
			<!-- {{num}} -->
		</view>
		//弹窗
		<u-popup :show="show" mode="left"  @close="handleClose">
		        <view class="pop-cont">
					<!-- u-border-bottom 下划线 -->
		            <view v-for="(item,index) in cfylist" :key="index" class="padding-sm u-border-bottom">
						{{item.bname}}
						<view v-if="index==0" class="">
							<view class="padding-tb-sm margin-top u-border-top" @click="listShow=!listShow">
								口味筛选
							</view>
							<u-cell-group v-if="listShow">
								<u-cell @click="handleList(itm,1)" v-for="(itm,idx) in item.list" :key="idx" :isLink="true" :title="itm.tname"></u-cell>
							</u-cell-group>
							<view class="padding-tb-sm" @click="sceneShow=!sceneShow">
								场景筛选
							</view>
							<u-cell-group v-if="sceneShow">
								<u-cell @click="handleList(itm,2)" v-for="(itm,idx) in item.scene" :key="idx" :isLink="true" :title="itm.tname"></u-cell>
							</u-cell-group>
						</view>
					</view>
		        </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				glist:[],
				page:0,
				tabArr:[
					{name:'分类',bcid:'',target:''},
					{name:'蛋糕',bcid:'1',target:'/pages/cake'},
					{name:'面包',bcid:'11',target:'/pages/bread'},
					{name:'小食',bcid:'6',target:'/pages/food/food'},
					{name:'购物车',bcid:'',target:'/pages/shapcat/shapcat'},
				],
				// bcid:1,
				// condition:{   //商品列表查询条件对象
				// 	bcid:11
				// },
				show: false,
				cfylist:[],
				listShow:false,
				sceneShow:false,
				isEmpty:false
			}
		},
		//vuex请求
		computed: {
			num() {
				return this.$store.state.count.num 
			},
			//this.$store.state：获取状态对象
			condition(){
				return this.$store.state.condition.cond
			}
		},
		// 数据请求
		onLoad() {
			this.loadData()
			//分类列表获取数据
			this.$get('/1.1/classes/classify').then(res=>{
				// console.log(res);
				this.cfylist = res.results
			})
		},
		// 触底方法
		onReachBottom() {
			this.loadData()
			
		},
		// 下拉刷新方法
		onPullDownRefresh() {
			// 所有数据清空
			this.glist = [],
			this.page = 0,
			this.loadData()
		},
		methods: {
			handleDetail(ind){
				// console.log(ind);
				uni.navigateTo({
					url:'../detail/detail?inde='+ind
				})
			},
			loadData(){
				let skip = this.page * 8
				//{"bcid":${this.bcid}} 通过JSON切换
				let wh = JSON.stringify(this.condition)
				let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`
				// let url = `/1.1/classes/goods?where={"bcid":${this.bcid}}&limit=8&skip=${skip}`
				//limit:加载几条数据   skip:越过前几条加载
				// let url = `/1.1/classes/goods?where={"bcid":1}&limit=8&skip=0`  
				this.$get(url).then(res=>{
					// 下拉刷新完毕后无论有没有数据立即停止下拉刷新
					uni.stopPullDownRefresh()  
					
					let {results} = res
					// 判断是否有数据
					if(results.length){
						this.page++
						// 触底后数据要追加
						this.glist = [
							...this.glist,
							...res.results
						]
						return
					}
					uni.showToast({
						title:'这回确实没有数据了',
						// 去掉icon的{}
						icon:'none'
					})
				})
			},
			// 刷新页面数据
			reloadData(){
				this.glist = [],
				this.page = 0,
				this.loadData()
			},
			handleTab(item){
				// 解构出当前点击的属性
				let {bcid,target} = item
				if(bcid){
					// 点击切换置空刷新
					// this.glist = []
					// this.page = 0
					// 获取点击的当前bcid ;转换为数值型
					// this.condition.bcid = Number(bcid)
					//触发变更数据
					this.$store.commit('changeCondition',{
						bcid:Number(bcid)
					})
					// 再次获取数据
					this.reloadData()
				}
				// 如果没有bcid且没有target
				if(!bcid&&!target){
					this.show = true
				}
				if(!bcid&&target){
					uni.navigateTo({
						url:target
					})
				}
			},
			handleClose(){
				this.show = false
			},
			// 口味筛选
			handleList({bid,tid},type){
				// console.log(listObj);
				let obj = {bcid:bid}
				type==1 ? obj.fid=tid : obj.sid=tid
				this.$store.commit('changeCondition',obj)
				//重新获取数据
				this.reloadData()
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: 120upx 0;
}
.cont{
	display: flex;
	flex-wrap: wrap;
	padding: 15upx;
	justify-content: space-between
}
.cake-item{
	// display: flex;
	width: 350upx;
	.poster{
		height: 350upx;
		background-color: #f5f5f5;
	}
	.fs-28{
		margin-top: 24upx;
	}
	.fs-16{
		margin: 14upx 0;
	}
	.fs-18{
		margin-bottom: 22upx;
	}
}
.fixed{
	position: fixed !important;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
	.pad{
		margin: 0 10upx 0 10upx;
	}
}
.pop-cont{
	width: 400upx;
	margin-top: 150upx;
}
</style>
